<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <style>
        .class-a {
            color: red;
        }
        .class-big {
            font-size: 60px;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>v-bind 绑定标签属性，使属性值成为变量</p>
        <!-- 最常用的指令，往往只需要最简单的符号  @（v-on） :(v-bind) -->
        <p v-bind:title="gkd" :dnf="lol">快要下课了。。。</p>
        <!-- 常用的场景：动态样式 -->
        <!-- 绑定style -->
        <!-- 变量替换1 -->
        <p :style="{color: val1,fontSize: val2+'px'}">中单亚索，不给就送</p>
        <!-- 变量替换2 -->
        <p :style="style1">集合，进攻暗影主宰</p>

        <p :style="[style1, freeStyle]">你有free吗？</p>
        <hr>
        <!-- 绑定class -->
        <p :class="c1">绑定class也可以修改样式</p>
        <p :class="c2+'big'">字符串拼接</p>
        <p :class="{red: val2 == 40}">判断，符合条件才有class</p>
        <p :class="val2 == 40?'red': 'blue'">判断，符合条件才有class，不符合是另一个class，三元表达式</p>
        <p :class="['static', c1, {red: val2 == 40}, val2 == 40?'red': 'blue']">大杂烩</p>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                gkd: '搞快点',
                lol: 'asagei',
                val1: 'gray',
                val2: 40,
                style1: {
                    border: '1px solid red',
                    fontSize: '30px'
                },
                freeStyle: {
                    fontWeight: 900
                },
                c1: 'class-a',
                c2: 'class-',
                isRed: false
            }
        })
    </script>
</body>
</html>